
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <!-- 导入 js jquery 库-->
    <script src="/static/js/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>

    <style>
        #myform{
            width:600px;
            height:800px;
            margin:10px auto;
        }
    </style>


    <script>
        $(function(){

            // 异步加载全国省份数据
            $.post("/getAllProvinces", { "parentId" : "-1"},
                function(data){
                    console.log(data.length);
                    // foreach
                    $.each(data, function (i, j) {
                        console.log(i);
                        console.log(j);
                        var option = $("<option>");
                        option.attr("value", j.id);
                        option.text(j.name);
                        $("#sheng").append(option);
                    });
                }, "json");

        });
    </script>

    <script>
        layui.use(['layer', 'form', 'upload', 'element'], function () {
            var form = layui.form;
            // 改变下拉列表的选项时触发  change 事件
            form.on('select(sheng)', function (province) {
                var provinceId = province.value;
                console.log(provinceId);
                $.post("/getAllCityById", {provinceId: provinceId}, function (data) {
                    console.log(data);
                    console.log(data.length);

                    $("#shi").empty();
                    $("#xian").empty();

                    $.each(data, function (i, j) {
                        var option = $("<option>");
                        option.attr("value", j.id);
                        option.text(j.name);
                        $("#shi").append(option);
                        layui.form.render("select");
                    });
                }, "json");
            });

            // 改变下拉列表的选项时触发  change 事件
            form.on('select(shi)', function (city) {
                var cityId = city.value;
                console.log(cityId);
                $.post("/getAllCountryById", {cityId: cityId}, function (data) {
                    console.log(data);
                    console.log(data.length);

                    $("#xian").empty();

                    $.each(data, function (i, j) {
                        var option = $("<option>");
                        option.attr("value", j.id);
                        option.text(j.name);
                        $("#xian").append(option);
                        layui.form.render("select");
                    });
                }, "json");
            });

            $("#username").focusout(function() {
                $.ajax({
                    type: "POST",
                    url: "/isExistedNickName",
                    data: "username=" + $("#username").val(),
                    // 请求后台成功的回调函数
                    success: function(msg){
                        console.log(msg);
                        console.log(msg == true);
                        if(msg == true){
                            layer.msg("账号已经存在!");
//                            alert("账号已经存在!");
                        }
                    }
                });
            });

            $("#code").click(function () {
                $(this).attr("src", "/code?timestramp=" + new Date());
            });


        });
    </script>

</head>
<body>


<div id="myform">


    <form class="layui-form" action="/register" method="post">

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" required  lay-verify="required"
                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">aaa</div>
        </div>

        <div class="layui-form-item">
            <%--<label class="layui-form-label">用户名</label>--%>
            <div class="layui-input-block">
                <img src="/static/img/default.png" width="100px" height="100px"/>
                <button id="test1" type="button" class="layui-btn">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password_two" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">省</label>
                <div class="layui-input-block">
                    <select id="sheng" name="sheng"  lay-filter="sheng">
                        <option value="-1">aaa</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">市</label>
                <div class="layui-input-block">
                    <select id="shi" name="shi" lay-filter="shi">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">县</label>
                <div class="layui-input-block">
                    <select id="xian" name="xian" lay-filter="xian">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="code" required lay-verify="required"
                           placeholder = "请输入您的验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><img id="code" src="/code"></div>
            </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

</div>

</body>
</html>
